<template>
  <div class="box" v-loading="loading">
    <div class="toolBox">
      <div class="title">积木式AI工具箱</div>
      <div class="toolBox-bottom">
        <!-- <el-button @click="upload" type="warning" size="large">上传图片</el-button> -->
        <VueDraggable
          id="drag1"
          :group="{ name: 'a', pull: 'clone', put: false }"
          :animation="150"
          v-model="list1"
          style="display: flex; margin-top: 5px"
        >
          <el-tag
            v-for="(item, index) in list1"
            :type="item.type"
            size="large"
            :key="index"
          >
            <div>{{ item.name }}</div>
          </el-tag>
        </VueDraggable>
      </div>
    </div>

    <div class="content">
      <div class="content-title">AI智能脚型分类应用</div>
      <div class="content-box">
        <div class="content-upload1">
          <div
            class="botton-compact"
            style="display: flex; align-items: center"
          >
            <div>待识别图片</div>
            <img
              src="../../../assets/jiantou.png"
              style="width: 150px; height: 30px; margin-right: -100px"
            />
          </div>
          <div class="upload-demo">
            <div @click="upload" class="uploader">
              <el-image v-if="imageUrl" :src="imageUrl" class="upload-image" />
              <div v-else style="margin: auto">
                <el-icon style="color: aqua">
                  <Plus />
                </el-icon>
              </div>
            </div>
            <input id="getimg" type="file" @change="handleFileChange" />
          </div>

          <div style="">
            <el-button
              style="font-size: 20px"
              type="info"
              size="large"
              @click="upload"
              >上传图片</el-button
            >
          </div>
        </div>

        <div class="content-upload">
          <div
            class="botton-compact"
            style="display: flex; align-items: center"
          >
            <div>预处理模块</div>
            <img
              src="../../../assets/jiantou.png"
              style="width: 150px; height: 30px; margin-right: -150px"
            />
          </div>

          <div class="absolute">
            <VueDraggable
              id="drag2"
              :group="{ name: 'a' }"
              :animation="150"
              v-model="list2"
              style="display: flex; flex-wrap: wrap"
              @sort="sotr"
            >
              <el-tag
                @close="handleClose(item)"
                closable
                v-for="(item, index) in list2"
                :type="item.type"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </VueDraggable>
          </div>
        </div>

        <div class="content-upload">
          <div
            class="botton-compact"
            style="display: flex; align-items: center"
          >
            <div>AI识别模块</div>
            <img
              src="../../../assets/jiantou.png"
              style="width: 200px; height: 30px; margin-right: -150px"
            />
          </div>
          <div class="upload-demo">
            <el-menu style="background-color: #383838; transform: scale(1.5)">
              <el-sub-menu>
                <template #title>
                  <div id="type">选择识别方式</div>
                </template>
                <el-menu-item 
                  style="background-color: #18191b"
                  index="1-1"
                  @click="change(identification[0].name)"
                >
                  <div style="color: #eeeeee">
                    1.{{ identification[0].name }}
                  </div>
                </el-menu-item>
                <el-menu-item
                  style="background-color: #18191b"
                  index="1-2"
                  @click="change(identification[1].name)"
                >
                  <div style="color: #eeeeee">
                    2.{{ identification[1].name }}
                  </div>
                </el-menu-item>
                <el-menu-item
                  style="background-color: #18191b"
                  index="1-3"
                  @click="change(identification[2].name)"
                >
                  <div style="color: #eeeeee">
                    3.{{ identification[2].name }}
                  </div>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </div>
          <el-button
            style="font-size: 20px"
            type="info"
            size="large"
            @click="identificate"
            >开始识别</el-button
          >
        </div>

        <!-- <div class="content-identification">
          <div class="identification-title">AI识别模块</div>
          <div class="identification-content">
            <el-menu style="background-color: #383838; transform: scale(1.2)">
              <el-sub-menu>
                <template #title>
                  <div id="type">选择识别方式</div>
                </template>
                <el-menu-item
                  style="background-color: #18191b"
                  index="1-1"
                  @click="change(identification[0].name)"
                >
                  <div style="color: #eeeeee">
                    1.{{ identification[0].name }}
                  </div>
                </el-menu-item>
                <el-menu-item
                  style="background-color: #18191b"
                  index="1-2"
                  @click="change(identification[1].name)"
                >
                  <div style="color: #eeeeee">
                    2.{{ identification[1].name }}
                  </div>
                </el-menu-item>
                <el-menu-item
                  style="background-color: #18191b"
                  index="1-3"
                  @click="change(identification[2].name)"
                >
                  <div style="color: #eeeeee">
                    3.{{ identification[2].name }}
                  </div>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </div>
          <el-button style="" type="info" size="large" @click="identificate"
            >开始识别</el-button
          >
        </div> -->

        <div class="content-res">
          <div
            class="botton-compact"
            style="display: flex; align-items: center"
          >
            <div>识别结果</div>
          </div>
          <div v-if="identificated == true">
            <el-image :src="dialogImageUrl" style="width: 300px" />
            <!-- <div class="res-content">
              <div class="res-content-title" id="result">埃及脚</div>
            </div> -->
          </div>
        </div>
        <!-- <img src="../../../assets/right.png" class="right" />
        <img src="../../../assets/right.png" class="right2" />
        <img src="../../../assets/right.png" class="right3" /> -->
      </div>
    </div>
    <div class="foot">
      <div v-if="showerror">错误：上传的图片太大，请检查后再上传！！</div>
      <button
        @click="
          () => {
            showerror = !showerror;
          }
        "
      >
        点击
      </button>
    </div>
  </div>
  <!-- <div class="absolute">
    <div
      style="
        width: 150px;
        color: white;
        font-weight: 600;
        font-size: 25px;
        position: absolute;
        top: -85px;
        left: 14px;
      "
    >
      预处理模块
    </div>

    <VueDraggable
      id="drag2"
      :group="{ name: 'a' }"
      :animation="150"
      v-model="list2"
      style="display: flex; flex-wrap: wrap"
      @sort="sotr"
    >
      <el-tag
        @close="handleClose(item)"
        closable
        v-for="(item, index) in list2"
        :type="item.type"
        :key="item"
        >{{ item.name }}</el-tag
      >
    </VueDraggable>
  </div> -->
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Plus, Right } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ElMessage } from "element-plus";
import { VueDraggable } from "vue-draggable-plus";


//延时
const loading=ref(false)
//正在选的
const choosing=ref('')

const showerror = ref(false);

const list1 = ref([
  {
    type: "primary",
    name: "灰度处理",
  },
  {
    type: "success",
    name: "目标分割",
  },
  {
    type: "primary",
    name: "图片旋转",
  },
  {
    type: "success",
    name: "图片压缩",
  },
  {
    type: "primary",
    name: "背景去除",
  },
  {
    type: "success",
    name: "噪声去除",
  },
  {
    type: "primary",
    name: "随机裁剪",
  },
  {
    type: "warning",
    name: "查看更多",
  },
]);

const list2 = ref([]);

function sotr() {
  console.log(list2.value);
  list2.value = list2.value.filter(function (item, index) {
    return list2.value.indexOf(item) === index; // 因为indexOf 只能查找到第一个
  });
}

//图片链接
const imageUrl = ref("");

//展示结果的图片
const dialogImageUrl = ref("src/img/希腊脚.png");

//是否展示结果
const identificated = ref(false);

//模型数据
const identification = reactive([
  {
    name: "简单机器学习",
  },
  {
    name: "深度学习算法",
  },
  {
    name: "大模型算法",
  },
]);

//修改模型
const change = (a) => {
  document.getElementById("type")!.innerText = a;
  choosing.value=a


};
//展示结果
const identificate = () => {
    loading.value=true
    let t=0
    if(choosing.value==identification[0].name){
        t=1000
    }else if(choosing.value==identification[1].name){
        t=3000
    }else if(choosing.value==identification[2].name){
        t=5000
    }
  setTimeout(() => {
    loading.value=false
    identificated.value = true;
  }, t);



};

const upload = () => {
  // imageUrl.value = 'src/img/希腊脚.png'
  document.getElementById("getimg").click();
  let div = document.getElementsByClassName("uploader");
  div[0].style.backgroundColor = "#3a3b3d";
  console.log(div);

  console.log("上传图片");
};

// 处理文件选择
const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    imageUrl.value = URL.createObjectURL(file);
  }
};

const handleClose = (tag: string) => {
  list2.value.splice(list2.value.indexOf(tag), 1);
};
</script>

<style scoped lang="scss">
.right {
  overflow: hidden;
  resize: both;
  position: absolute;
  width: 80px;
  height: 150px;
  left: 420px;
  top: 280px;
}
.right2 {
  overflow: hidden;
  resize: both;
  position: absolute;
  width: 270px;
  height: 150px;
  left: 920px;
  top: 280px;
}
.right3 {
  overflow: hidden;
  resize: both;
  position: absolute;
  width: 140px;
  height: 150px;
  left: 620px;
  top: 280px;
}

input {
  visibility: hidden;
  /* opacity:0; */
  position: absolute;
  left: 100px;
  top: 210px;
}

.uploader {
  width: 100%;
  height: 100%;
  background-color: rgb(39, 28, 49);
  border-color: aquamarine;
  display: flex;
  align-content: center;
  border-radius: 8px;
  cursor: pointer;
}

.upload-image {
  width: 100%;
  max-height: 360px;
  margin: auto;
  flex-shrink: 0;
}

#drag1 .el-tag {
  margin: 0 10px;
}

#drag2 .el-tag {
  margin: 10px;
}

.absolute {
  width: 150px;
  flex: 1;
  /* background-color: springgreen;*/
  //   position: absolute;
  //   left: 480px;
  //   top: 420px;

  /* width: 400px;
    height: 100px;
    position: absolute;
    left: 1000px;
    top: 180px; */

  border-style: solid;
  border-radius: 10px;
  border-color: rgb(177, 161, 188);

  .el-tag {
    width: 120px;
    height: 120px;
    font-size: 22px;
    &:hover {
      transform: scale(1.1);
      transition: all 0.3s ease;
      box-shadow: 0 0 5px #000000;
    }
  }
}

el-menu-item {
  background-color: rgb(104, 91, 113);
}

#type {
  color: #eeeeee;
  font-weight: bold;
  font-size: 22px;
}

.box {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.toolBox {
  display: flex;
  flex-direction: column;
  background-color: rgb(97, 101, 103);
  width: 95%;
  height: 200px;
  border-radius: 10px;
  align-self: center;
  margin: 0 20px 10px 20px;
}

.title {
  align-self: center;

  font-size: 38px;
  color: #eeeeee;
}

.toolBox-bottom {
  margin: 10px;
}

.toolBox-bottom .el-tag {
  width: 120px;
  height: 120px;

  &:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
    box-shadow: 0 0 5px #000000;
  }
}

.toolBox-bottom .el-tag div {
  font-size: 25px;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content-title {
  align-self: center;
  font-size: 40px;
  color: #eeeeee;
}

.content-box {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.content-upload1 {
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
}

.content-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 500px;
}

.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1;
  //   padding-right: 100px;
  //transform: scale(1.3);
  //   margin: 50px 0;
}

.botton-compact {
  //   margin-right: 50px;
  height: 100px;
  div {
    font-weight: bold;
    font-size: 30px;
    color: #eeeeee;
  }
}

.identification-content {
  width: 300px;
  margin-top: 100px;
}

.identification-title {
  font-weight: bold;
  font-size: 30px;

  color: #eeeeee;
}

.content-identification {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin-left: 100px;
}

.content-res {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  align-self: self-start;
}

.res-title {
  color: #eeeeee;
  font-size: 30px;
  font-weight: bold;
}

.res-img {
  margin-top: 80px;
}

.res-content {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.res-content-title {
  color: #eeeeee;
  align-self: center;
  font-size: 28px;
}

.foot {
  margin: 5px 0 30px 100px;
  width: 90%;
  height: 130px;
  display: flex;
  position: relative;
}

.foot > div:first-child {
  margin: auto;
  font-size: 50px;
  color: #ff0000;
}

.foot button {
  height: 100px;
  width: 500px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>